<template>
  <div class="clinicalDiagnosis">

    <div class="chiefComplaintForm">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="chiefComplaintContent">
          <h3>主诉信息</h3>
          <el-form-item label="患者主诉">
            <el-input v-model="form.desc" type="textarea" class="paientInput" placeholder="请输入文字"></el-input>
            <MustAdd></MustAdd>
          </el-form-item>
        </div>
        <div class="chiefComplaintContent">
          <h3>现代史/既往史</h3>
          <div class="chiefComplaintContentFlex">
            <div class="left">
              <el-form-item v-for="(item,ind) in form.radio1" :key=" 'radio1'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
                <MustAdd></MustAdd>
              </el-form-item>
              <el-form-item label="不良习惯">
                <el-checkbox-group v-model="form.baHadit.type">
                  <el-checkbox v-for="item in form.baHadit.hadit" :key="item" :label="item" name="type"></el-checkbox>
                </el-checkbox-group>
                <MustAdd></MustAdd>
              </el-form-item>
            </div>
            <div class="right">
              <el-form-item v-for="(item,ind) in form.radio2" :key="'radio2'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
                <MustAdd></MustAdd>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="不良习惯发现及持续时间">
            <el-input v-model="form.desc0" type="textarea" class="paientInput" placeholder="请输入文字"></el-input>
            <MustAdd></MustAdd>
          </el-form-item>
        </div>
        <div class="chiefComplaintContent">
          <h3>面部检查</h3>
          <div class="chiefComplaintContentFlex">
            <el-col class="left">
              <el-form-item v-for="(item,ind) in form.radio3" :key="'radio3'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col class="right">
              <el-form-item v-for="(item,ind) in form.radio4" :key="'radio4'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </div>
        </div>
        <div class="chiefComplaintContent">
          <h3>口内软组织及功能检查</h3>
          <div class="chiefComplaintContentFlex">
            <el-col class="left">
              <el-form-item v-for="(item,index) in form.input" :key="'input'+index" :label="item.inputName">
                <el-input v-model="item.inputModel" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item v-for="(item,ind) in form.radio5" :key="'radio5'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="其他">
                <el-input v-model="form.inputModel" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="right">
              <el-form-item v-for="(item,ind) in form.radio6" :key="'radio6'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                  <el-input v-model="item.inputModel" placeholder="请输入" :class="{noneInput:item.boo}"></el-input>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </div>
        </div>
        <div class="chiefComplaintContent">
          <h3>错颌畸形检查</h3>
          <div class="chiefComplaintContentFlex">
            <el-col class="left">
              <el-form-item v-for="(item,index) in form.input1" :key="'input1'+index" :label="item.inputName">
                <el-input v-model="item.inputModel" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item v-for="(item,ind) in form.radio7" :key="'radio7'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col class="right">
              <el-form-item v-for="(item,index) in form.input2" :key="'input2'+index" :label="item.inputName">
                <el-input v-model="item.inputModel" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item v-for="(item,ind) in form.radio8" :key="'radio8'+ind" :label="item.radioName">
                <el-radio-group v-model="item.radioModel">
                  <el-radio v-for="i in item.radioValue" :key="i" :label="i"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="其他">
            <el-input v-model="form.desc1" type="textarea" class="paientInput" placeholder="请输入文字"></el-input>
          </el-form-item>
        </div>
        <div class="chiefComplaintContent">
          <h3>特殊检查</h3>
          <div class="chiefComplaintContentFlex">
            <el-form-item v-for="(item,index) in form.input3" :key="index" :label="item.inputName">
              <el-input v-model="item.inputModel" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="chiefComplaintContent">
          <h3>医生诉求及设计思路</h3>
          <el-input v-model="form.desc2" type="textarea" class="docSay" placeholder="请输入文字"></el-input>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
import MustAdd from './MustAdd';
export default {
  name: 'ClinicalDiagnosis',
  components: {
    MustAdd
  },
  data() {
    return {
      form: {
        desc: '',
        desc0: '',
        radio1: [
          { radioName: '鼻咽部疾病：', radioValue: ['有', '无'], radioModel: '' },
          { radioName: '过敏史：', radioValue: ['有', '无', '其他'], radioModel: '' },
          { radioName: '喂养方式：', radioValue: ['母乳', '奶瓶', '混合'], radioModel: '' }
        ],
        baHadit: { type: [], hadit: ['无', '打鼾', '吮指', '咬物', '吮颊', '口呼吸'] },
        radio2: [
          { radioName: '全身病史：', radioValue: ['有', '无'], radioModel: '' },
          { radioName: '家族遗传史：', radioValue: ['反颌', '小下颌畸形(鹰嘴)', '其他', '无'], radioModel: '' },
          { radioName: '治疗动机：', radioValue: ['父母意愿', '自身意愿'], radioModel: '' }
        ],
        radio3: [
          { radioName: '正面观：', radioValue: ['左右基本对称', '左右不对称'], radioModel: '' },
          { radioName: '上唇：', radioValue: ['正常', '过短'], radioModel: '' },
          { radioName: '唇肌：', radioValue: ['正常', '紧张'], radioModel: '' },
          { radioName: '下颌骨：', radioValue: ['正常', '左偏', '右偏'], radioModel: '' },
          { radioName: '呼吸方式：', radioValue: ['鼻呼吸', '口呼吸'], radioModel: '' }
        ],
        radio4: [
          { radioName: '侧貌：', radioValue: ['直', '凹', '凸'], radioModel: '' },
          { radioName: '鼻唇沟：', radioValue: ['锐角', '钝角'], radioModel: '' },
          { radioName: '颏肌：', radioValue: ['正常', '紧张'], radioModel: '' },
          { radioName: '', radioValue: [], radioModel: '' },
          { radioName: '吞咽方式：', radioValue: ['正常', '婴儿式吞咽'], radioModel: '' }
        ],
        radio5: [
          { radioName: '', radioValue: [], radioModel: '' },
          { radioName: '舌体大小：', radioValue: ['正常', '大', '齿痕'], radioModel: '' },
          { radioName: '唇系带附着：', radioValue: ['正常', '低'], radioModel: '' },
          { radioName: '扁桃体：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '正常'], radioModel: '' }
        ],
        radio6: [
          { radioName: '关节弹响：', radioValue: ['无', '左有', '右有', '左右都有'], radioModel: '', boo: true },
          { radioName: '颞下颌关节：', radioValue: ['正常', '左异常', '右异常', '左右都异常'], radioModel: '', boo: true },
          { radioName: '颌干扰：', radioValue: ['无', '有'], radioModel: '', boo: false },
          { radioName: '舌体位置：', radioValue: ['正常', '偏前', '偏下'], radioModel: '', boo: true }
        ],
        radio7: [
          { radioName: '咬上颌腭部黏膜：', radioValue: ['是', '否'], radioModel: '' },
          { radioName: '反颌下颌可退至切对切：', radioValue: ['是', '否'], radioModel: '' },
          { radioName: '上颌牙弓：', radioValue: ['正常', '狭窄'], radioModel: '' },
          { radioName: '磨牙关系左：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '尖牙关系左：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '前牙覆颌：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '正常'], radioModel: '' }
        ],
        radio8: [
          { radioName: '牙周炎症：', radioValue: ['无', '有'], radioModel: '' },
          { radioName: '', radioValue: [], radioModel: '' },
          { radioName: '下颌弓牙：', radioValue: ['正常', '狭窄'], radioModel: '' },
          { radioName: '磨牙关系右：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '尖牙关系右：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '前牙覆盖：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '正常'], radioModel: '' }
        ],
        input: [
          { inputName: '开口度', inputModel: '' },
          { inputName: '开口型', inputModel: '' },
          { inputName: '闭口型', inputModel: '' }
        ],
        input1: [
          { inputName: '锁合牙', inputModel: '' },
          { inputName: '融合牙', inputModel: '' },
          { inputName: '乳牙缺失', inputModel: '' },
          { inputName: '多生牙', inputModel: '' },
          { inputName: '扭转牙', inputModel: '' }
        ],
        input2: [
          { inputName: '畸形中央尖：', inputModel: '' },
          { inputName: '先天恒牙胚缺失：', inputModel: '' },
          { inputName: '根尖发育异常牙：', inputModel: '' },
          { inputName: '冠根比≤1的牙：', inputModel: '' }
        ],
        input3: [
          { inputName: 'CBCT线检查日期：', inputModel: '' },
          { inputName: 'CBCT线检查诊断：：', inputModel: '' },
          { inputName: '颞颌关节检查日期：', inputModel: '' },
          { inputName: '颞颌关节检查诊断：：', inputModel: '' }
        ],
        inputModel: '',
        desc1: '',
        desc2: ''
      }
    };
  },
  methods: {
    // onSubmit() {
    //   console.log('submit!');
    // }
  }
};
</script>

<style>
.clinicalDiagnosis{
  padding:20px 0 40px 0px;
}
.clinicalDiagnosis h3{
  font-size: 16px;
}
.clinicalDiagnosis .chiefComplaintContent{
  width: 100%;
  padding:20px 30px 40px 30px;
  border-bottom: 1px #E6E6E6 solid ;
}
.clinicalDiagnosis .chiefComplaintContent:last-of-type{
  border-bottom:none;
}
.clinicalDiagnosis .paientInput{
  width: 613px;
  height: 70px;
  vertical-align: top;
  background: #F2F2F2;
  border-radius: 6px;
}
.clinicalDiagnosis
.clinicalDiagnosis .paientInput::placeholder{
  color: #CCCCCC;
}
.clinicalDiagnosis .el-textarea__inner{
  background: #F2F2F2;
  border: none;
  height: 100%;
  padding: 12px 16px;
}
.clinicalDiagnosis  .chiefComplaintContentFlex{
  display: flex;
}
.clinicalDiagnosis  .chiefComplaintContentFlex .right .el-form-item:last-of-type .mustAdd{
  display: none;
}
.clinicalDiagnosis .noneInput{
  display: none;
}
.clinicalDiagnosis  .docSay{
  height: 103px;
}
.clinicalDiagnosis .el-form-item__label{
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #999999;
  width: 120px!important;
}
.clinicalDiagnosis .el-input__inner{
  width: 500px;
  height: 42px;
  background: #F2F2F2;
  border: 1px solid #E6E6E6;
  opacity: 1;
  border-radius: 6px;
}
</style>
